<template>
  <div class="myTable">
    <div class="dataTotalBox" v-if="isShowTotalBox">
      <slot name="defaultTotal">
        <div class="datatotal">
          共计<span>{{ totalCount }}</span
          >项
        </div>
        <div class="datatotal">
          已选中<span>{{ selectCount }}</span
          >项
        </div>
      </slot>
      <slot name="moreTotal"></slot>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        @selection-change="selectionChange"
        border
        style="width: 100%"
      >
        <el-table-column
          v-if="isShowSelection"
          align="center"
          width="50"
          type="selection"
        />
        <el-table-column
          v-if="isShowIndex"
          label="序号"
          align="center"
          width="50"
          type="index"
        />
        <!-- 遍历配置项 通过具名插槽与默认插槽给外界自定义的机会和设置默认值 -->
        <template v-for="item in tableConfig">
          <el-table-column
            v-bind="item"
            :key="item.label"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <slot
                :row="scope.row"
                :index="scope.$index"
                :name="item.slotName"
              >
                {{ scope.row[item.prop] }}
              </slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageInfo.current"
          :page-size="pageInfo.size"
          layout="total, prev, pager, next"
          :total="totalCount"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableConfig: {
      type: Array,
      required: true
    },
    totalCount: {
      type: Number,
      default: 0
    },
    isShowSelection: {
      type: Boolean,
      default: true
    },
    isShowIndex: {
      type: Boolean,
      default: false
    },
    isShowTotalBox: {
      type: Boolean,
      default: true
    },
    pageInfo: {
      type: Object,
      default: () => ({ current: 1, size: 10 })
    }
  },
  data() {
    return {
      selectCount: 0
    };
  },
  methods: {
    selectionChange(data) {
      this.selectCount = data.length || 0;
      this.$emit("selectionChange", this.selectCount);
      this.$emit("selectChange", data);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("handleCurrentChange", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.myTable {
  margin-right: 10px;
  margin-top: 20px;

  .dataTotalBox {
    padding-left: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .datatotal {
      margin-right: 50px;
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      font-family: SourceHanSansSC-regular;
      span {
        padding: 0 10px;
        font-size: 24px;
        font-weight: 550;
      }
    }
  }
  .table {
    padding: 10px 30px;
    padding-bottom: 40px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    .btnGroup {
      display: flex;
      align-items: center;
      justify-content: space-around;
      /deep/ .el-button--mini,
      .el-button--mini.is-round {
        padding: 4px 15px;
      }
    }
    .pagination {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
